/**
 * 打开一个悬浮页面
 */
function openFloatPage(title, url, width, height, cloesCallback) {
    //创建黑色蒙版
    document.body.innerHTML +=
        '<div id="floatBg" style="width:100%;height:100%;background-color:#000000;position:fixed;top:0;left:0;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5;"></div>' +
        '<div id="floatDialog" style="background-color:#ffffff;width:0;height:0;position:fixed;border-radius:5px;padding-top:30px;padding-bottom:5px">' +
        '<iframe id="floatIframe" style="border:0;width:100%;height:100%;" scrolling="true"></iframe>' +
        '<span id="floatTitle" style="position:fixed;font-size:14px;color:#666666">' + title + '</span>' +
        '<span id="floatBtnClose" style="position:fixed;float:right;font-size:30px;color:#666666;cursor:pointer">×</span>' +
        '</div>';
    var floatBg = document.getElementById('floatBg');
    var floatDialog = document.getElementById('floatDialog');
    var floatTitle = document.getElementById('floatTitle');
    var floatBtnClose = document.getElementById('floatBtnClose');
    document.getElementById('floatIframe').src = url;
    var currAlpha = 0;
    var currScale = 0;
    floatDialog.style.left = ((document.documentElement.clientWidth - 35) * 0.5 - width * 0.5) + 'px';
    floatDialog.style.top = (document.documentElement.clientHeight * 0.5 - height * 0.5 - 50) + 'px';
    floatDialog.style.width = width + 'px';
    floatDialog.style.height = height + 'px';
    floatTitle.style.left = '10px';
    floatTitle.style.top = '6px';
    floatBtnClose.style.right = '8px';
    floatBtnClose.style.top = '-6px';
    floatBtnClose.onmouseover = function () {
        floatBtnClose.style.color = '#999999';
    };
    floatBtnClose.onmouseout = function () {
        floatBtnClose.style.color = '#666666';
    };
    floatBtnClose.onclick = function () {
        floatBg.remove();
        floatDialog.remove();
        floatBtnClose.remove();
        if (cloesCallback) {
            cloesCallback();
        }
    };
    setBgAlpha(currAlpha);
    setScale(currScale);
    dialogAnim();
    bgAlphaAnim();

    function dialogAnim() {
        currScale = currScale + (1 - currScale) * 0.5;
        if (1 - currScale < 0.01) {
            currScale = 1;
            setScale(currScale);
        } else {
            setScale(currScale);
            setTimeout(dialogAnim, 20);
        }
    }

    function bgAlphaAnim() {
        currAlpha = currAlpha + (0.5 - currAlpha) * 0.3;
        if (0.5 - currAlpha < 0.1) {
            setBgAlpha(currAlpha);
        } else {
            setBgAlpha(currAlpha);
            setTimeout(bgAlphaAnim, 30);
        }
    }

    function setScale(scale) {
        floatDialog.style.transform = 'scale(' + scale + ')';
    }

    function setBgAlpha(a) {
        floatBg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=' + (a * 100) + ',finishOpacity=' + (a * 100) + ')';
        floatBg.style.MozOpacity = a;
        floatBg.style.opacity = a;
    }
}

/**
 * 显示一个悬浮等待图标转圈
 */
function wait(isShow) {
    var angle = 0;
    if (isShow) {
        //创建黑色蒙版
        document.body.innerHTML +=
            '<div id="waitBg" style="width:100%;height:100%;background-color:#000000;position:fixed;top:0;left:0;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity:0.2;"></div>' +
            '<div id="waitDialog" style="position:fixed;">' +
            '<span class="iconfont icon91jiazai" style="color:#fff;font-size:35px"></span>' +
            '</div>';
        this.waitDialog = document.getElementById('waitDialog');
        this.waitDialog.style.left = (document.documentElement.clientWidth * 0.5) + 'px';
        this.waitDialog.style.top = (document.documentElement.clientHeight * 0.4) + 'px';
        waitRotate();
        setTimeout(closeWait, 10000);
    } else {
        closeWait();
    }

    function waitRotate() {
        this.waitDialog.style.webkitTransform = 'rotate(' + angle + 'deg)';
        this.waitDialog.style.mozTransform = 'rotate(' + angle + 'deg)';
        this.waitDialog.style.msTransform = 'rotate(' + angle + 'deg)';
        this.waitDialog.style.oTransform = 'rotate(' + angle + 'deg)';
        this.waitDialog.style.transform = 'rotate(' + angle + 'deg)';
        angle = angle + 1;
        setTimeout(waitRotate, 10);
    }

    function closeWait() {
        var waitBg = document.getElementById('waitBg');
        if (waitBg) {
            waitBg.remove();
        }
        if (this.waitDialog) {
            this.waitDialog.remove();
        }
    }
}

/**
 * 打开一个悬浮的图片浏览器
 */
function openFloatPhotoView(urls, showIndex, cloesCallback) {
    //创建黑色蒙版
    document.body.innerHTML +=
        '<div id="photoViewerBg" style="width:100%;height:100%;background-color:#000000;position:fixed;top:0;left:0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;"></div>' +
        '<img id="photoViewerImg" style="position:fixed"/>' +
        '<div id="photoViewerBtnLeft" style="position:fixed;cursor:pointer;left:10px"><span id="photoViewerBtnLeft2" class="iconfont iconchaopimiaotuangou-" style="font-size:50px;color:#aaa"></span></div>' +
        '<div id="photoViewerBtnRight" style="position:fixed;cursor:pointer;right:10px"><span id="photoViewerBtnRight2" class="iconfont iconchaopimiaotuangou-1" style="font-size:50px;color:#aaa"></span></div>';
    var photoViewerBg = document.getElementById('photoViewerBg');
    var photoViewerImg = document.getElementById('photoViewerImg');
    var photoViewerBtnLeft = document.getElementById('photoViewerBtnLeft');
    var photoViewerBtnRight = document.getElementById('photoViewerBtnRight');
    var currAlpha = 0;
    var currIndex = 0;
    var currScale = 0;

    photoViewerBtnLeft.style.top = (document.documentElement.clientHeight * 0.4) + 'px';
    photoViewerBtnRight.style.top = (document.documentElement.clientHeight * 0.4) + 'px';
    setBtnStyle(document.getElementById('photoViewerBtnLeft2'));
    setBtnStyle(document.getElementById('photoViewerBtnRight2'));
    photoViewerBtnLeft.onclick = function () {
        if (currIndex > 0) {
            currIndex -= 1;
            showImg(currIndex);
            photoViewerBtnLeft.style.display = currIndex == 0 ? 'none' : '';
            photoViewerBtnRight.style.display = '';
        }
    };
    photoViewerBtnRight.onclick = function () {
        if (currIndex < urls.length - 1) {
            currIndex += 1;
            showImg(currIndex);
            photoViewerBtnLeft.style.display = '';
            photoViewerBtnRight.style.display = currIndex == urls.length - 1 ? 'none' : '';
        }
    };
    photoViewerBg.onclick = function () {
        photoViewerBg.remove();
        photoViewerImg.remove();
        photoViewerBtnLeft.remove();
        photoViewerBtnRight.remove();
        if (cloesCallback) {
            cloesCallback();
        }
    };
    bgAlphaAnim();
    showImg(showIndex);

    if (urls.length == 1) {
        photoViewerBtnLeft.style.display = 'none';
        photoViewerBtnRight.style.display = 'none';
    } else if (urls.length == 2) {
        if (showIndex == 0) {
            photoViewerBtnLeft.style.display = 'none';
        } else {
            photoViewerBtnRight.style.display = 'none';
        }
    }

    function showImg(index) {
        currIndex = index;
        currScale = 0;
        setImgScale(currScale);
        photoViewerImg.unload
        photoViewerImg.src = urls[index];
        photoViewerImg.onload = function () {
            var maxH = document.documentElement.clientHeight * 0.6;
            var imgW = this.width;
            var imgH = this.height;
            if (imgH > maxH) {
                imgH = maxH;
                imgW = imgH * this.width / this.height;
                this.height = imgH;
            }
            photoViewerImg.style.top = (document.documentElement.clientHeight * 0.5 - imgH * 0.5) + 'px';
            photoViewerImg.style.left = (document.documentElement.clientWidth * 0.5 - imgW * 0.5) + 'px';
            imgScaleAnim();
        }
    }

    function imgScaleAnim() {
        currScale = currScale + (1 - currScale) * 0.3;
        if (1 - currScale < 0.01) {
            setImgScale(currScale);
        } else {
            setImgScale(currScale);
            setTimeout(imgScaleAnim, 20);
        }
    }

    function bgAlphaAnim() {
        currAlpha = currAlpha + (0.8 - currAlpha) * 0.3;
        if (0.8 - currAlpha < 0.01) {
            setBgAlpha(currAlpha);
        } else {
            setBgAlpha(currAlpha);
            setTimeout(bgAlphaAnim, 30);
        }
    }

    function setImgScale(scale) {
        photoViewerImg.style.transform = 'scale(' + scale + ')';
    }

    function setBgAlpha(a) {
        photoViewerBg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=' + (a * 100) + ',finishOpacity=' + (a * 100) + ')';
        photoViewerBg.style.MozOpacity = a;
        photoViewerBg.style.opacity = a;
    }

    function setBtnStyle(target) {
        target.onmouseover = function () {
            target.style.color = '#ccc';
        };
        target.onmouseout = function () {
            target.style.color = '#aaa';
        };
    }

}

/**
 * 打开一个悬浮的视频播放器
 */
function openFloatVideo(url, cloesCallback) {
    //创建黑色蒙版
    document.body.innerHTML +=
        '<div id="videoBg" style="width:100%;height:100%;background-color:#000000;position:fixed;top:0;left:0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;"></div>' +
        '<div id="videoContainer" style="background-color:#000000;position:fixed">' +
        '<video src="' + url + '" controls = "true" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="position:fixed;width:100%;height:100%;top:0;left:0"></video>' +
        '</div>';
    var videoBg = document.getElementById('videoBg');
    var videoContainer = document.getElementById('videoContainer');
    var currAlpha = 0;
    var currScale = 0;

    var videoH = document.documentElement.clientHeight * 0.6;
    var videoW = videoH * 1.5;
    videoContainer.style.width = videoW + 'px';
    videoContainer.style.height = videoH + 'px';
    videoContainer.style.left = (document.documentElement.clientWidth * 0.5 - videoW * 0.5) + 'px';
    videoContainer.style.top = (document.documentElement.clientHeight * 0.5 - videoH * 0.5) + 'px';

    videoBg.onclick = function () {
        videoBg.remove();
        videoContainer.remove();
        if (cloesCallback) {
            cloesCallback();
        }
    };
    bgAlphaAnim();
    videoScaleAnim();

    function videoScaleAnim() {
        currScale = currScale + (1 - currScale) * 0.3;
        if (1 - currScale < 0.01) {
            setVideoScale(currScale);
        } else {
            setVideoScale(currScale);
            setTimeout(videoScaleAnim, 20);
        }
    }

    function bgAlphaAnim() {
        currAlpha = currAlpha + (0.8 - currAlpha) * 0.3;
        if (0.8 - currAlpha < 0.01) {
            setBgAlpha(currAlpha);
        } else {
            setBgAlpha(currAlpha);
            setTimeout(bgAlphaAnim, 30);
        }
    }

    function setVideoScale(scale) {
        videoContainer.style.transform = 'scale(' + scale + ')';
    }

    function setBgAlpha(a) {
        videoBg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=' + (a * 100) + ',finishOpacity=' + (a * 100) + ')';
        videoBg.style.MozOpacity = a;
        videoBg.style.opacity = a;
    }

}